<!--
*Author：富行天下团队

 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/Report/OperationDaily.js此处编写
 -->
<template>
  <div>
    <view-grid 
    ref="grid" 
      :columns="columns" 
      :detail="detail" 
      :editFormFields="editFormFields"
      :editFormFileds="editFormFields" 
      :editFormOptions="editFormOptions" 
      :searchFormFields="searchFormFields"
      :searchFormFileds="searchFormFields" 
      :searchFormOptions="searchFormOptions" 
      :table="table" 
      :extend="extend">
    </view-grid>
    <!-- <div id="didiididi" style="width: 100%;
      visibility:hidden;
      height: 100%;
      position: absolute;
      background: rgba(0,0,0,.5);
      top: 0px;
      z-index: 999;
    ">

      <div id="iuyui" style="background: #ffffff;
        position: absolute;
        width: 800px;
        height: 300px;
        top: 10%;
        left: 50%;
        margin-left: -400px;
        border-radius: 10px;">
        <div style="border-top-left-radius: 6px;
          border-top-right-radius: 6px;
          padding: 12px 15px;
          background-image: linear-gradient(135deg, #0cd7bd 10%, #57c5f7 100%);line-height: 20px;
          font-size: 14px; font-weight: bold; color:#ffffff"> 上传日报文件必须为Excel格式 </div>
          <input style=" padding: 20px 20px 5px 20px; font-size: 18px;" type="file" id="Inputid" ref="upload" @change="readExcel" accept=".xls, .xlsx" />
          <p style="padding:5px 20px 20px 20px;color:red">注：选择文件-打开 文件自动上传,上传成功会弹窗提示！</p>
          <p style="padding:5px 20px 20px 20px;color:green"></p>
          <div @click="greet" style="padding: 5px 18px;
            color: rgb(255, 255, 255);
            background-color: rgb(45, 183, 245);
            font-size: 16px;
            border-color: rgb(45, 183, 245);
            width: 80px;
            border-radius: 5px;
            position: absolute;
            right: 10px;
            bottom: 10px;
            text-align: center;cursor: pointer;"> 关闭 </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import extend from "@/extension/Report/OperationDailyDetail.js";
import ViewGrid from "@/components/basic/viewT.vue";

import * as XLSX from "xlsx";

var vueParam = {
  components: {
    ViewGrid,
  },
  data() {
    return {
      table: {
        key: "id",
        footer: "Foots",
        cnName: "营业日报明细表",
        name: "OperationDailyDetail",
        url: "/V_small_order_daily_paper/",
        sortName: "createDate",
        // paginationSize: 30,
        // paginationHide: true,
      },
      extend: extend,
      editFormFields: {},
      editFormOptions: [],
      searchFormFields: { subscriberName: "", createDate: "", subscriberPhone: "", distributorCode: "" },
      searchFormOptions: [
        [
          { title: "预订人姓名", field: "subscriberName", type: "like" },
          { title: "预订手机号", field: "subscriberPhone", type: "like" },
          { title: "创建日期", field: "createDate", type: "date1",clearable: false },
        ],
        [
        {
            dataKey: "distributorList",
            data: [],
            title: "分销商名称",
            field: "distributorCode",
            type: "select",
          },
          { title: "订单编号", field: "orderNumber", type: "like" },
          { title: "订单状态", field: "status", type: "select", data: [{value: '已完成',key:'已完成'},{value: '确认',key:'确认'},{value: '退款或者售后',key:'退款或者售后'}], },
        ]
      ],
      columns: [
      {
          field: "orderNumber",
          title: "订单编号",
          type: "string",
          width: 170,
          align: "left",
          show: true
        },
        {
          field: "distributorName",
          title: "销售渠道名称",
          type: "string",
          width: 200,
          align: "left",
          sortable: true,
          show: true
        },
        {
          field: "totalOrderAmount",
          title: "订单总金额",
          type: "decimal",
          width: 90,
          align: "left",
          show: true
        },
        {
          field: "totalAmountReceivable",
          title: "应收总金额",
          type: "decimal",
          width: 90,
          align: "left",
          show: true
        },
        {
          field: "totalAmountReceived",
          title: "实收总金额",
          type: "decimal",
          width: 80,
          align: "left",
          show: true
        },
        {
          field: "status",
          title: "订单状态",
          type: "decimal",
          width: 80,
          align: "left",
          show: true
        },
        {
          field: "paymentNumber",
          title: "支付流水号",
          type: "decimal",
          width: 160,
          align: "left",
          show: true
        },
        {
          field: "subscriberName",
          title: "预订人姓名",
          type: "string",
          width: 90,
          align: "left",
          show: true
        },
        {
          field: "subscriberPhone",
          title: "预订手机号",
          type: "decimal",
          width: 110,
          align: "left",
          show: true
        },
        {
          field: "createDate",
          title: "创建时间",
          type: "datetime",
          width: 160,
          align: "left",
          sortable: true,
          show: true
        },
        {
          field: "writeoffTime",
          title: "核销时间",
          type: "decimal",
          width: 160,
          align: "left",
          show: true
        },
        {
          field: "refundTime",
          title: "退款时间",
          type: "datetime",
          width: 160,
          align: "left",
          show: true
        },
        {
          field: "operatorName",
          title: "操作人",
          // bind: { key: "HotelIdType", data: [] },
          type: "string",
          width: 150,
          align: "left",
          show: true
        },
      ],
      detail: {
        cnName: "#detailCnName",
        columns: [],
        sortName: "",
        key: "",
      },
    };
  },
  methods: {
    greet() {
      var empty = document.getElementById("didiididi");
      empty.style.visibility = "hidden";
    },
    readExcel(e) {
      //  console.log()
      const files = e.target.files;
      const fileReader = new FileReader();
      fileReader.readAsBinaryString(files[0]);
      const emptyIN = document.getElementById("Inputid");
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary",
          }); // 二进制读取
          const wsname = workbook.SheetNames[0]; // 取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); // 生成json表格内容
          const filesName = files[0].name;
          var aaa = filesName.split(".")[0];
          var bbb = aaa.split("(")[0];
          console.log(bbb);
          var urlData = {
            name: bbb,
            data: ws,
          };

          var rdata = JSON.stringify(urlData);
          var senddata = rdata
            .replace(/\r\n/g, "")
            .replace(/\n/g, "")
            .replace(/\s+/g, "");
          //1、创建xhr的对象
          let xhr = new XMLHttpRequest();
          //2、调用open函数('请求类型','url')
          xhr.open("POST", process.env.VUE_APP_BASE_URL + "kuaibao/saveExcelData");
          //3、设置 Content-Type属性
          xhr.setRequestHeader(
            "Content-Type",
            "application/x-www-form-urlencoded; charset=UTF-8"
          );
          //4、调用send函数
          xhr.send(senddata);
          //5、监听事件
          var _this = this;

          xhr.onreadystatechange = function () {
            let result = JSON.parse(xhr.responseText);

            if (xhr.readyState == 4 && result.code == 200) {
              _this.$refs["upload"].value = "";
              alert(filesName + "上传成功");
            } else {
              // alert(filesName+'上传失败')
              _this.$refs["upload"].value = "";
              alert(result.msg);
            }
            urlData = {};
          };
          // emptyIN.outerHTML = emptyIN.outerHTML
        } catch (e) {
          return false;
        }
      };
    },
  },
};
export default vueParam;
</script>
